<template>
  <div class='search-bar'>
    <el-form :label-width="labelWidth" :model="searchModel" :inline="true">
      <el-form-item label="车牌号:">
        <el-input style="width:12rem" v-model="input" placeholder=""></el-input>
      </el-form-item>
      <el-form-item style="margin-left:20px" label="通行门禁:">
        <el-input style="width:12rem" v-model="input" placeholder=""></el-input>
      </el-form-item>
      <el-form-item style="margin-left:20px" label="通行时间:">
        <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" align="right">
        </el-date-picker>
        <el-button style="margin-left:25px" type="primary" @click="handleDownload">查询</el-button>
        <el-button style="margin-left:10px" @click="handleDownload">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading='listLoading' :data='list' element-loading-text='Loading' border fit highlight-current-row>
      <el-table-column align='center' label='序号' width='95'>
        <template slot-scope='scope'>
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label='车牌号' width='110' align='center'>
        <template slot-scope='scope' >
          <el-link type="primary"  @click='handleEdit(scope.$index, scope.row)'>{{ scope.row.cheph }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label='车牌类型' width='110' align='center'>
        <template slot-scope='scope'>
          <span>{{ scope.row.chepType }}</span>
        </template>
      </el-table-column>
      <el-table-column label='车牌类别' width='110' align='center'>
        <template slot-scope='scope'>
          {{ scope.row.chepType1 }}
        </template>
      </el-table-column>
      <el-table-column align='center' prop='created_at1' label='通行门禁' width='200'>
        <template slot-scope='scope'>
          <span>{{ scope.row.tongxmenj }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name='status-col' label='通行方向' width='110' align='center'>
        <template slot-scope='scope'>
          <el-tag >{{ scope.row.fangx ? "进场" : "出场" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align='center' prop='created_at' label='通行方式' width='200'>
        <template slot-scope='scope'>
          <span>{{ scope.row.tongxfs }}</span>
        </template>
      </el-table-column>

      <el-table-column align='center' prop='created_at' label='通行时间' width='200'>
        <template slot-scope='scope'>
          <i class='el-icon-time' />
          <span>{{ scope.row.tongxsj }}</span>
        </template>
      </el-table-column>
      <el-table-column align='center' prop='created_at2' label='操作' width='300'>
        <template slot-scope='scope'>
          <el-button size='mini' @click='handleEdit(scope.$index, scope.row)'>查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top:15px;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[10, 15, 20, 25]" :page-size="pageSize"
        layout=" prev, pager, next, jumper" :total="50">
      </el-pagination>
    </div>
    <el-dialog title="车辆通行详情" :visible.sync="dialogFormVisible" width="40%">
      <el-form :label-width="labelWidth" :model="dialogModel" :inline="true">
        <el-form-item  label=""  prop="cheph">
          <span class="form-span" >{{ "设备名称:" }}</span>
          <span class="form-span" >{{ dialogModel.cheph }}</span>
        </el-form-item>
        <el-form-item  label="" prop="chepType">
          <span class="form-span" >{{ "车辆类型:" }}</span>
          <span class="form-span" >{{ dialogModel.chepType }}</span>
        </el-form-item>
        <el-form-item label=""  prop="chepType1">
          <span class="form-span" >{{ "车辆类别:" }}</span>
          <span class="form-span" >{{ dialogModel.chepType1 }}</span>
        </el-form-item>
      </el-form>
      <el-form :label-width="labelWidth" :model="dialogModel" :inline="true">
        <el-form-item  label="" prop="tongxmenj">
          <span class="form-span" >{{ "通行门禁:" }}</span>
          <span class="form-span" >{{ dialogModel.tongxmenj }}</span>
        </el-form-item>
        <el-form-item  label="" prop="fangx">
          <span class="form-span" >{{ "通行方向:" }}</span>
          <span class="form-span" >{{ dialogModel.fangx? "进场" : "出场" }}</span>
        </el-form-item>
        <el-form-item  label="" prop="tongxsj">
          <span class="form-span" >{{ "通行时间:" }}</span>
          <span class="form-span" >{{ dialogModel.tongxsj }}</span>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>

export default {
  data() {
    return {
      input: "",
      listLoading: false,
      searchModel: {},
      dialogModel:{},
      labelWidth: "80px",
      labelHeight: "32px",
      tableData: [],
      count: 0,
      currentPage: 1,
      total: 20,
      pageSize: 5,
      value2: '',
      dialogFormVisible:false,
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      types: [
        {
          value: 0,
          label: '全部'
        }, {
          value: 1,
          label: '启用'
        }, {
          value: 2,
          label: '禁用'
        },],
      list: [{
        cheph: '闽A12345',
        chepType: '小车',
        chepType1: '固定车',
        tongxmenj: '东大门',
        fangx: 1,
        tongxfs: '正常通行',
        tongxsj: '2022-10-28 08:50:08'
      },{
        cheph: '闽A12543',
        chepType: '大车',
        chepType1: '固定车',
        tongxmenj: '东大门',
        fangx: 1,
        tongxfs: '正常通行',
        tongxsj: '2022-10-28 08:51:08'
      },{
        cheph: '闽A13542',
        chepType: '小车',
        chepType1: '临时车',
        tongxmenj: '南大门',
        fangx: 0,
        tongxfs: '正常通行',
        tongxsj: '2022-10-28 08:50:08'
      },{
        cheph: '闽A54321',
        chepType: '大车',
        chepType1: '固定车',
        tongxmenj: '南大门',
        fangx: 0,
        tongxfs: '人工方向',
        tongxsj: '2022-10-28 08:50:08'
      }],
    }
  },
  created() {
  },
  methods: {

    handleSizeChange(v) {
      // this.pageSize = v;
      // this.currentPage = 1;
      // this.getList();
    },
    handleCurrentChange(v) {
      // this.currentPage = v;
      // this.getList();
    },
    handleDownload() {

    },
    handleEdit(id,checkList){
      this.dialogFormVisible = true;
      this.dialogModel = checkList;
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  margin: 0.2rem;
  padding: 0.2rem;
}
#selectForm >>> .el-form-item__label {
  font-size: 12px;
}
.search-bar {
  margin-bottom: .2rem;
  text-align: left;
  float: left;
  margin-left: 8rem;
  margin-top: 3rem;
}

.form-span{
  font-size: 18px;;
}

.block {
  margin-left: 20px;
  margin-right: 2rem;
  float: right;
}

.move-right {
  margin-left: 5rem;
}
</style>
